<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource基本使用</title>

    <script type="text/javascript" src="../lib/vue-2.4.0.js"></script>
    <!--  注意：vue-resource 依赖于 Vue, 有先后顺序  -->
    <script type="text/javascript" src="../lib/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        date: {
            url_get: 'http://vue.studyit.io/api/getlunbo',
            url_post: 'http://vue.studyit.io/api/post',
            url_jsonp: 'http://vue.studyit.io/api/jsonp',
        },
        methods: {
            getInfo() {
                this.$http.get(this.url_get).then(function (successResponse) {
                    console.log(successResponse.statusText)
                }, function (errorResponse) {
                    console.log(errorResponse.status)
                })
            },
            postInfo() {
                this.$http.post(this.url_post, {}, {}).then(function (successResponse) {
                    console.log(successResponse.statusText)
                }, function (errorResponse) {
                    console.log(errorResponse.status)
                })
            },
            jsonpInfo() {
                this.$http.jsonp(
                    'http://vue.studyit.io/api/jsonp',// 这里使用 this.url_jsonp 方式引用Url时候，会出错
                    {
                        headers: {'content-type': 'text/javascript; charset=utf-8'},
                    }
                ).then(function (successResponse) {
                    console.log(successResponse.statusText)
                }, function (errorResponse) {
                    console.log("errorResponse = ")
                    console.log(errorResponse)
                }).catch(err => {
                    console.log("err = ")
                    console.log(err)
                })
            },
        },
        filters: {},
        directives: {},
    });
</script>
</body>
</html>
